<template>
	<div class="app-mob-toolbar-group">
		<template v-for="item in items" :key="item.name">
			<ToolbarItem
				v-if="item.itemType != 'ITEMS'"
				:item="item"
				@item-click="handleToolbarItemClick"
			/>
			<div @click="onChange" v-else>
				<van-cell>
					<template v-if="item.showIcon" #icon>
						<AppIcon
							:iconClass="item.iconCls"
							class="item-icon-class"
							:imgPath="item.imgPath"
						></AppIcon>
					</template>
					<template v-if="item.showCaption" #title>
						<div class="toolbar-item-title">{{ item.caption }}</div>
					</template>
					<template #right-icon>
						<AppIcon
							:iconClass="computedIcon"
							class="item-right-icon-class"
						></AppIcon>
					</template>
				</van-cell>
			</div>
			<div class="app-mob-toolbar-group-items" v-if="isDown">
				<ToolbarGroups
					:items="item.items"
					@item-click="handleToolbarItemClick"
				></ToolbarGroups>
			</div>
		</template>
	</div>
</template>
<script setup lang="ts">
import { toolbarGroupsProps } from '../toolbar';
import ToolbarItem from './toolbar-item.vue';
const props = defineProps(toolbarGroupsProps);
const emit = defineEmits(['itemClick']);
const isDown = ref(false); //是否展开子项
const computedIcon = computed(() => {
	return isDown.value ? 'arrow-down' : 'arrow-up';
});
const onChange = () => {
	isDown.value = !isDown.value;
};
const handleToolbarItemClick = (tag: string, event: any, logic: any) => {
	emit('itemClick', tag, event, logic);
};
</script>
